<template >
<view class="container">
   <swiper class="banner" indicatorDots="true" autoplay="true" interval="2200" duration="1000" circular indicatorActiveColor='#FD6D1F'>
    <swiper-item v-for="item of  bannerList" :key="item.id">
      
        <img @click="toBanner(item)" :src="item.advertImg"/>
     
      
      
    </swiper-item>
  </swiper>
  <div class="select">
   <ul>
                         <li    v-for="(item,index) in items" :key="index"> 
                             <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + item.productId+'&img='+ item.productThumb">
                                            <div   class='pic'>
                                                <img style="width:44vw;height:44vw" :src="item.productThumb" alt="">
                                            </div>
                                    <div class='bottom'>
                                        <p style="text-indent: 0;"  >{{item.productName }}</p>
                                        <p class='MBprice'> <span>￥{{item.price}} </span> <span>{{item.orderCount}}人已付款</span> </p>
                                            
                                </div>
                             </navigator>
                            </li>
              
                    </ul>
       </div>             
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'

export default {
  data () {
    return {
      typeId: 0,
      collectList: [],
      items:[],
      page:1,
      loadingBt:false,
      nothing:false,
      vtitle:'',
      bannerList:[]
    }
  },
  onShow(){
    this.vtitle= this.$route.query.title 
      wx.setNavigationBarTitle({
            title: this.vtitle,
          }) 
          this.home();
  },
  async mounted () {
    await Promise.all([
      this.DayDayProduct()
    ])
  },
  onUnload(){
    this.items=[]
  },
   onReachBottom(){
        console.log(this.loadingBt)
    if(this.loadingBt){
       this.DayDayProduct()
    }
  
  },
  methods: {
     async home(){
 
    let data=JSON.stringify({  "type":330})
      let   res = await api.BestBanner({"data":data});
              this.bannerList=res.data
              
  }, 
      toBanner(item){
        console.log(item.linkUrl.slice(0,7))
        if(item.linkUrl.slice(0,7)=='StoreId'){
                 wx.navigateTo({
              url: '/pages/merchants/merchants?storeId=' + item.linkUrl.split('=')[1]
            });
        }
        // StoreId
        // wx.navigateTo({
        //   url: '/shopping/checkout?id=' + 5556
        // });
  },
  async  DayDayProduct(){
    let res
    
             let data=JSON.stringify({  "pageIndex":this.page, "pageSize":"10", 'ageGroup':parseInt(this.$route.query.age) +1})
              res = await api.ImplosionList({"data":data});
           this.items = this.items.concat(res.data);
   

                   if (res.data.length == 10) {
                        this.page++;
                        this.loadingBt=true;
                    }else{
                        this.loadingBt=false;
                    }
              

    },
    
 
 
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/ucenter/collect'
    }
  }
}
</script>

<style lang='scss' scoped>
page{
    background: #f4f4f4;
    min-height: 100%;
}
 .banner {
  width: 100vw;
  height:43vw;
  img{
    width: 100%;;
    height:43vw;
  }
}
.container{
    background: #f4f4f4;
    min-height: 100%;
    background: #f7f7f7;
}
 
.select{

    .title{
        text-indent: 15px;
           height: 55px;
            color: #333333;
            font-size: 14px;
            line-height: 55px;
            background: #fff;
            margin-bottom: 15px;
    }
 
 ul {
 
  font-size: 0;
  li {
    width: 44vw;
    margin-left: 4vw;
    margin-top:4vw;
    display: inline-block;
    background-color: #fff;
    // background:rgba(255,209,232,1);
box-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.11);
    .bottom {
      width: 90%;
      margin: 0 auto;

    
    .pic {
      width: 48vw;
      height: 48vw;
    }
        p:nth-child(1) {
        color: #000;
        font-size: 12px;
        line-height: 14px;
          overflow: hidden;
          height: 28px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
            margin-bottom: 6px;
            margin-top:8px;
        }

  }     
  .MBprice{
      padding-bottom: 9px;
    
      span:nth-child(1){
          color: #FD6D1F;
          font-size: 14px;

      }
       span:nth-child(2){
          color: #333333;
          font-size: 12px;
         float:right;
      }
  }
  
  }
}
}
</style>
